require(["../../conf/config.js"], function(){
	
	require(["h&f", "template" ,"jquery", "jquery.cookie"],function(hf, template){
		
	/*---------------------------- 全局变量区 ------------------------*/
		//商品信息
		// let goodsInfo = {
		// 	"id" : "123345",
		// 	"reduce":1,
		// 	"goodsImg":"https://imgs-qn.iliangcang.com/ware/goods/big/2/265/265083.jpg?t=1566885259",
		// 	"brand":"广田硝子",
		// 	"brandImg":"https://imgs-qn.iliangcang.com/ware/brand/92.jpg",
		// 	"like":606,
		// 	"price":350.00,
		// 	"neoPrice" : 332.00,
		// 	"title":"樱花 酒器套组 | 传统的樱花影像光影曲折",
		// 	"info":"融合了传统的樱花影像，手绘线条、精心雕刻、打磨等..."
		// }
		
		//3个商品信息
		let goodsInfoArr = [
			
			{
				"id" : "123345",
				"reduce":1,
				"goodsImg":"https://imgs-qn.iliangcang.com/ware/goods/icon/2/265/265083.jpg",
				"price":350.00,
				"neoPrice" : 332.00,
				"title":"樱花 酒器套组",
				"info":"能传递温度与情感的手工酒具",
				"attr":"数量:套装;",
				
			},
			
			{
				"id" : "4545546",
				"reduce":0,
				"goodsImg":"https://imgs-qn.iliangcang.com/ware/goods/icon/2/265/265041.jpg",
				"price":168.00,
				"neoPrice" : 0,
				"title":"桂花冰酿 | 低度果露酒",
				"info":null,
				"attr":"容量:750ml;"
			},
			
			{
				"id" : "89705",
				"reduce":1,
				"goodsImg":"https://imgs-qn.iliangcang.com/ware/upload/big/2/445/445542.jpg?85462.93752357678",
				"price":228.00,
				"neoPrice" : 189.00,
				"title":"日本金箔莳绘鼠标垫 |",
				"info":"限时特惠",
				"attr":"颜色:赤富士;"
			}
		];
		
	/*---------------------------- 引用部分 ------------------------*/
	
		// 模块添加上面浮动导航栏和下面固定部分
		addTopAndBottomFn();
		//商品所在位置栏
		goodsPositionFn();
		
		//获取商品图片并生成展示图
		getGoodsImgs(function(data){
			
			mainImgsDisplay(data.mainList)
			
		}, function(data){
			
			//图片浏览器事件
			imgsDisplay();
			
		});
		
		//点击按钮增加减少数量
		goodsNumChange();
		
		//获取商品的价格信息
		goodsPriceInfo();
		
		//获取推荐列表商品信息
		getRecommendList();
		
		//添加进入购物车
		addGoodsToShopCar();
		
	/*---------------------------- 实现部分 ------------------------*/	
	
		// 模块添加上面浮动导航栏和下面固定部分实现
		function addTopAndBottomFn(){
			
			document.body.innerHTML = hf.headerHTML + document.body.innerHTML + hf.footerShopHTML + hf.footerHTML;
			
			hf.headerJS();
			
			hf.footerShopJS();
		}
		
		//商品所在位置栏实现
		function goodsPositionFn(){
			
			let dataList = ["良仓", "水具", "酒具", "樱花 酒器套组 | 传统的樱花影像光影曲折"];
			
			let $topList = $("ul.topList");
			
			$topList.css({
				
				"line-height" : "20px",
				"font-size" : "12px"
			});
			
			let fragment = document.createDocumentFragment();
			
			dataList.forEach(function(title, idx){
				
				if(idx > 0){
					
					let span = document.createElement("span");
					
					span.innerText = " > ";
					
					span.style.color = "rgb(191, 191, 191)";
					
					fragment.appendChild(span);
				}
				let a = document.createElement("a");
				
				a.innerText = title;
				
				a.href = "javascript:void(0)";
				
				a.style.color = "rgb(191, 191, 191)";
				
				if(idx == dataList.length - 1){
					
					a.removeAttribute("href");
				}
				
				if(idx == dataList.length - 2){
					
					a.style.color = "black";
				}
				fragment.appendChild(a);
			})
			
			$topList.append(fragment);
			
		}
		
		//获取商品图片并生成展示图实现
		function getGoodsImgs(netCallback, domCallback){
			
			$.ajax({
				url:"http://localhost:8000/source/data/goodsImgs.json",
				success:function(data){
					// console.log(data);
					
					if (netCallback) netCallback(data);
								
					createImgs(data.showList);
					
					setTimeout(function(){
						
						if(domCallback) domCallback(data);
						
					},0);
				}
				
			});
			
			function createImgs(data){
				
				let $bigImgUl = $("ul.bigImgsUl");
				
				let $smallImgOl = $("ol.smallImgsOl");
				
				data.forEach(function(imgStr, index){
					
					let $bigLi = $("<li>");
					
					$bigLi.css({
						"background" : `url(${imgStr}) no-repeat center center`,
						"background-size" : "contain"
					});
					
					$bigImgUl.append($bigLi);
					
					let $smallLi = $("<li>");
					
					if(index == 0){
						
						$smallLi.addClass("smallImgFirst");
					}
					
					$smallLi.css({
						"background" : `url(${imgStr}) no-repeat center center`,
						"background-size" : "cover"
					});
					
					$smallImgOl.append($smallLi);
				});
			}
		}
		
		//图片浏览器事件实现
		function imgsDisplay(){
			
			let $bigImgUl = $("ul.bigImgsUl");
			
			let $smallImgOl = $("ol.smallImgsOl");
			
			let $smallImgArr = $smallImgOl.children();
			
			let currentIdx = 0;
			
			let space = 6;
			
			let itemWidth = 64;
			
			let borderWidth = 1;
			
			let fullWidth = space + itemWidth;
			
			$smallImgArr.eq(0).css({
				"border" : "1px solid black"
			});
			
			$bigImgUl.width($bigImgUl.width()*$bigImgUl.children().length);
			
			$smallImgOl.width(fullWidth*$smallImgArr.length-space+2);
			//点击小图标
			$smallImgArr.on("click", function(){
				
				turnToTheIndex($(this).index());			
			});
			
			//点击方向箭头
			$("div.goodsImgsRoot span.changeBtn").on("click",function(){
				
				let idx = 0;
				
				if($(this).hasClass("leftBtn")){
					
					console.log("left   "+currentIdx);
					
					if(currentIdx == 0){
						
						idx = $smallImgArr.length - 1;
						
					}else{
						
						idx = currentIdx - 1;
					}
					
				}else if($(this).hasClass("rightBtn")){
					console.log("right   "+currentIdx);
					if(currentIdx == $smallImgArr.length - 1){
						
						idx = 0;
						
					}else{
						
						idx = currentIdx + 1;
					}
					
				}
				
				turnToTheIndex(idx);
			})
			
			//移动到第几个
			function turnToTheIndex(index){
				
				if(currentIdx == index) return;
				
				currentIdx = index;
				
				$bigImgUl.stop().animate({left:-350*currentIdx},500);
				
				$smallImgArr.eq(currentIdx).css("border","1px solid black").siblings().css("border","none");
				
				if($smallImgOl.width() <= 350) return;
				
				let fixLeft = -currentIdx*fullWidth+ 350/2 - (itemWidth+2*borderWidth)/2 -space + space;
				
				if(fixLeft >=0){
					
					fixLeft = 0;
					
				}else if(fixLeft <= 350 - $smallImgOl.width()){
					
					fixLeft = 350 - $smallImgOl.width();
				}
				
				$smallImgOl.stop().animate({left:fixLeft},500);
			}
			
		}
	
		//点击按钮增加减少数量实现
		function goodsNumChange(){
			
			// console.log(typeof $("input.goodsNumDisplay").attr("value"));
			let $input = $("input.goodsNumDisplay");
			
			$("div.selectNumRoot>a").on("click", function(){
				
				let num = parseInt($input.attr("value")); 
				
				if($(this).hasClass("goodsNumReduce")){
					
					if(num == 1) return;
					
					num--;
					
				}else if($(this).hasClass("goodsNumPuls")){
					
					num++;
				}
				
				$input.attr("value",num);
			});
			
		}
	
		//获取商品的价格信息实现
		function goodsPriceInfo(){
			
			$.ajax({
				url:"/goodsInfo/priceInfo/?act=checkGoodsAmount&goods_id=265083&type_keys=7&attr_keys=3",
				success:function(dataStr){
					
					// console.log(data);
					setGoodsPriceInfo(JSON.parse(dataStr));
					
				},
				error(xhr,status,error){
					
					console.log(error);
				}
				
			});
			
			function setGoodsPriceInfo(data){
				
				let $detailRoot = $("li.goodsPriceLi div.priceDetail");
				
				let $nowPrice = $detailRoot.find("span.nowPrice");
				//判断是否有折扣价格
				if(data.discount_price){
					//现价格
					$nowPrice.text("¥"+data.discount_price+"元");
					//原价格
					let $oldPrice = $detailRoot.find("span.oldPrice");
					
					$oldPrice.css("display","inline");
					
					$oldPrice.text("¥"+data.price+"元"); 
					//优惠文字
					let $reduceText = $detailRoot.find("p.reduceText");
					
					$reduceText.css("display","inline-block");
					
					$reduceText.text(data.prom_info.list_label);
					//优惠图片
					$detailRoot.find("img.reduceImg").attr("src","https://imgs-qn.iliangcang.com/ware/promotion/icon/178.jpg")
									  .css("display","inline-block");
					//优惠描述
					let $reduceInfo = $detailRoot.find("div.reduceInfo");
					
					$reduceInfo.css("display","inline-block");
					
					$reduceInfo.find("p.topDesc").text(data.prom_info.detail_note);
					
					$reduceInfo.find("p.overTime").text("活动截止日期："+data.prom_info.end_time);
					
				}else{
					
					$nowPrice.text("¥"+data.price+"元"); 
				}
				
				
				
			}
			
		}
	
		//获取推荐列表商品信息实现
		function getRecommendList(){
			
			$.ajax({
				
				url : "../../source/data/recommendGoods.json",
				
				success : function (dataStr){
					// console.log(dataStr);
					if(dataStr){
						toSetOnRoot(dataStr);
					}
				},
				 
				error : function (xhr,status,error){
					
					console.log(error);
				}
			});
			
			function toSetOnRoot(list){
				
				let htmlStr = template("recommendList", {
									list
							});
						
				$("ul.recommendList").html(htmlStr);
			}
			
		}
	
		//添加进入购物车实现
		function addGoodsToShopCar(){
			// console.log(goodsInfo.id);
			
			$("a.goodsShopCarBtn").on("click", function(){
				
				handleCookie();
				
				console.log($.cookie("goodsShop"));
			})
			
			function handleCookie(){
				
				let num = parseInt($("input.goodsNumDisplay").attr("value"));
				
				let list = [];
				
				let randomGoods = goodsInfoArr[parseInt(Math.random()*3)];
				
				let scCookie = $.cookie("goodsShop");
				
				if(scCookie){
					// console.log(scCookie);
					list =  JSON.parse($.cookie("goodsShop"));
			    
					let goodsArr = list.filter((goods)=>{
						
						return  goods.id == randomGoods.id;
					});
					
					if(goodsArr.length > 0){
						
						let goods = goodsArr[0];
						
						goods.num += num;
						
					}else{
						
						let neoGoods = {
							num : num
						};
						
						Object.assign(neoGoods, randomGoods);
						
						list.push(neoGoods);
					}
					
				}else{
					
					let neoGoods = {
						num : num
					};
					
					Object.assign(neoGoods, randomGoods);
					
					list.push(neoGoods);
				}
				
				$.cookie("goodsShop", JSON.stringify(list), { expires: 7 ,path: '/'});
			}
			
			
		}
		
		//主图片展示区实现
		function mainImgsDisplay(imgStrArr){
			
			let $root = $("div.goodsMainImgsRoot");
			// console.log($root);
			imgStrArr.forEach(function(url){
				
				$root.append($("<img>").attr("src",url).width("100%"));
			});
		}
    
	})
	
})